<template>
  <div class="app-container">
    <div class="flower-petals" id="petalsContainer"></div>
    <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" @clickExport="clickExport" />
    <div class="flex mt10" style="width: 100%">
      <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }" style="width: 100%">
        <div class="flex">
          <h1 class="f16">供应商搜索</h1>
          <JDrawer :tableHeader="drawerHeader" @removeOne="removeOne" :currentTableRow="currentTableRow" @save="save" />
        </div>
        <Table
          :data="{ tableHeader, tableData, isLoading }"
          selection
          @selectList="selectTableList"
          @currentRow="currentRow"
          @functionClick="functionClick"
        />
      </el-card>
    </div>
    <el-card shadow="never" :body-style="{ padding: '5px' }">
      <PageModule :PageData="{ total, buttonS: true }" @pageSizeChange="handleSizeChange" @pageChange="handleCurrentChange" />
    </el-card>
  </div>
</template>

<script lang="ts" setup name="Define">
import { useI18n } from 'vue-i18n'
import fileRequest from '@/utils/fileRequest'
import JMessage from '@/utils/JMessage'
import service from '@/utils/request'
import { debounce } from 'lodash'
import { watch } from 'vue'
import { onMounted } from 'vue'
import { ref } from 'vue'
import JDrawer from '@/components/JDrawer/JDrawer.vue'
import { useDrawerStore } from '@/stores/drawer'
const { t } = useI18n()

const drawerStore = useDrawerStore()
const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入供应商名称',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入供应商地址',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '查询'
  },
  {
    type: 'ExcelExport'
  }
])

// 表一模块
// 表一按钮
const findClicked = (content: string) => {
  if (content === '置空') {
    formList.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
  }
}
const clickExport = async (status: any) => {
  // console.log(
  //   JSON.parse(JSON.stringify(tableHeader.value)).map((item: any) => {
  //     item.label = t(item.label)
  //     return item
  //   })
  // )
  let res = await fileRequest.post<any, any>('/supplier/exportExcel', {
    vendorName: formList.value.find((item: any) => item.inputPlaceholder === '请输入供应商名称')?.inputValue,
    vendorAddress: formList.value.find((item: any) => item.inputPlaceholder === '请输入供应商地址')?.inputValue,
    status,
    tableHeader: JSON.parse(JSON.stringify(tableHeader.value)).map((item: any) => {
      item.label = t(item.label)
      return item
    })
  })
  const link = document.createElement('a') // 利用a标签自定义下载文件名
  let blob = new Blob([res.data]) // 创建Blob对象，设置文件类型
  link.style.display = 'none'
  link.href = window.URL.createObjectURL(blob)
  const FileName = decodeURI(res.headers['content-disposition'].split(`utf-8' '`)[1])
  link.download = FileName //自定义文件名字
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}
const tableData = ref([])
const isLoading = ref(true)
// 分页器
const currentPage = ref(1)
const pageSize = ref(40)
const total = ref(0)
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getTableList()
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getTableList()
}
// // 表格计算函数
// const cfmFlag = () => {
//   const Unaudited = formList.value.find((item: any) => item.type === 'checkbox' && item.checkboxLabel === '有欠数')
//   const Audited = formList.value.find((item: any) => item.type === 'checkbox' && item.checkboxLabel === '无欠数')
//   if (!Unaudited || !Audited) return
//   if (Unaudited.checked && Audited.checked) {
//     return ''
//   } else if (Unaudited.checked) {
//     return 'N'
//   } else if (Audited.checked) {
//     return 'Y'
//   } else {
//     JMessage.warning('必须至少选择一项')
//     Unaudited.checked = true
//     Audited.checked = true
//     return ''
//   }
// }

const tableHeader = ref([
  {
    label: '序号',
    prop: 'id',
    width: '50px'
  },
  {
    label: '操作',
    type: 'function'
  },
  {
    width: 120,
    label: '供应商号码',
    prop: 'supplier_code'
  },
  {
    width: 430,
    label: '供应商名称',
    prop: 'supplier_name'
  },
  {
    label: '供应商税号',
    prop: 'tax_code'
  },
  {
    width: 160,
    label: '供应商行业',
    prop: 'supply_industry'
  },
  {
    width: 380,
    label: '供应商地址',
    prop: 'address'
  },
  {
    width: 160,
    label: '联系人',
    prop: 'contact_person'
  },
  {
    width: 160,
    label: '联系电话',
    prop: 'contact_phone'
  },
  {
    width: 180,
    label: '邮箱',
    prop: 'email'
  },
  {
    width: 170,
    label: '网站',
    prop: 'website'
  },
  {
    width: 90,
    label: '银行账号',
    prop: 'bank_account'
  },
  {
    width: 140,
    label: '银行名称',
    prop: 'bank_name'
  },
  {
    label: '合同号',
    prop: 'contract_code'
  },
  {
    label: '合同签订日期',
    prop: 'contract_signing_date'
  },
  {
    label: '合同期限',
    prop: 'contract_term'
  },
  {
    label: '付款方式',
    prop: 'payment_terms'
  },
  {
    label: '账期',
    prop: 'debt_period'
  },
  {
    label: '合同状态',
    prop: 'contract_status'
  },
  {
    label: '状态',
    prop: 'supplier_status'
  }
])
// 获取表数据
const getTableList = debounce(async () => {
  isLoading.value = true
  let tableDataList = await service.post<any, any>('/supplier/getSupplierInfoByBody', {
    vendorName: formList.value.find((item: any) => item.inputPlaceholder === '请输入供应商名称')?.inputValue,
    vendorAddress: formList.value.find((item: any) => item.inputPlaceholder === '请输入供应商地址')?.inputValue,
    pageNum: currentPage.value,
    pageSize: pageSize.value
    // shortStatus: cfmFlag() //	有无欠数(Y/N)	string	body	true
  })
  isLoading.value = false
  tableData.value = tableDataList.data.list
  total.value = tableDataList.data.total
  currentRow()
}, 500)
onMounted(() => {
  getTableList()
})
watch(
  () =>
    formList.value.map((item: any) => {
      item.selectValue, item.inputValue, item.dateValue, item.checked
    }),
  () => {
    getTableList()
  }
)
// 点击表给另一张表传数据
const currentTableRow = ref({}) as any
const currentRow = async (row: any = tableData.value[0]) => {
  currentTableRow.value = row
}
const selectedLists = ref([]) as any
const selectTableList = (selectedList: any) => {
  selectedLists.value = selectedList
}

// 删除
const removeOne = async () => {
  // 向服务器发送请求，更新外派单信息
  const res = (await service.post(`/supplier/deleteSupplierInfoByBody`, selectedLists.value)) as any
  // 判断请求是否成功
  if (res.code === 200) {
    getTableList()
    JMessage.success(res.message)
  } else {
    JMessage.error(res.message)
  }
}

// 抽屉模块
const drawerHeader = ref([
  {
    label: '操作',
    type: 'function'
  },
  {
    width: 120,
    label: '供应商号码',
    prop: 'supplier_code'
  },
  {
    width: 430,
    label: '供应商名称',
    prop: 'supplier_name'
  },
  {
    label: '供应商税号',
    prop: 'tax_code'
  },
  {
    width: 160,
    label: '供应商行业',
    prop: 'supply_industry'
  },
  {
    width: 380,
    label: '供应商地址',
    prop: 'address'
  },
  {
    width: 160,
    label: '联系人',
    prop: 'contact_person'
  },
  {
    width: 160,
    label: '联系电话',
    prop: 'contact_phone'
  },
  {
    width: 180,
    label: '邮箱',
    prop: 'email'
  },
  {
    width: 170,
    label: '网站',
    prop: 'website'
  },
  {
    width: 90,
    label: '银行账号',
    prop: 'bank_account'
  },
  {
    width: 140,
    label: '银行名称',
    prop: 'bank_name'
  },
  {
    label: '合同号',
    prop: 'contract_code'
  },
  {
    label: '合同签订日期',
    prop: 'contract_signing_date'
  },
  {
    label: '合同期限',
    prop: 'contract_term'
  },
  {
    label: '付款方式',
    prop: 'payment_terms'
  },
  {
    label: '账期',
    prop: 'debt_period'
  },
  {
    label: '合同状态',
    prop: 'contract_status'
  },
  {
    label: '状态',
    prop: 'supplier_status'
  }
])
const functionClick = async (title: string, row: any, index: any) => {
  if (title === 'detail') {
    drawerStore.$state.visible = true
    drawerStore.$state.tableData = []
    drawerStore.$state.tableData.push({ ...row, change: true, unDetail: true, unDelete: true })
    currentTableRow.value = row
  } else if (title === 'delete') {
    const res = (await service.post('/supplier/deleteSupplierInfoByBody', [row])) as any
    if (res.code === 200) {
      tableData.value.splice(index, 1)
      JMessage.success(res.message)
    } else {
      JMessage.error(res.message)
    }
  }
}
const save = async (tableData: any) => {
  const res = (await service.post('/supplier/saveSupplierInfoByBody', tableData)) as any
  if (res.code === 200) {
    drawerStore.$state.visible = false
    getTableList()
    JMessage.success(res.message)
  } else {
    JMessage.error(res.message)
  }
}
</script>
